/*
 * @Author: zhengshundong
 * @Date:   2020-10-12 14:50:21
 * @Last Modified by:   zhengshundong
 * @Last Modified time: 2020-10-12 16:14:44
 */
/**
 * #info
 *
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/08/16
 *@description  radio  component，单选框。
 */

/**
 * #item
 *
 * @type        aty-radio
 * @cn            单选框
 * @nameprop   radio-label
 * @menu        表单
 * @stPlugin    true
 * @stContainer false
 * @children    [ aty-text , aty-icon ]
 * @mixins      [./components/components/form/form-item/form-item.js],
 */
import config from '../../../config/config.js'
import formItem from '../form-item/form-item.js'

// prefix
const componentName = config.prefix + '-radio'
// module
const module = {
  name: componentName,
  mixins: [formItem],
  components: {},
  model: {
    prop: 'checked', // 属性名
    event: 'change' //  事件名
  },
  props: {
    /**
     * #property
     *
     * @name    elementId
     * @cn      input id
     * @group   基本属性
     * @type    string
     * @description HTML label元素的for属性 input元素的id属性
     */
    elementId: {
      type: String
    },
    /**
     * #property
     *
     * @name    name
     * @cn      属性名称
     * @group   基本属性
     * @type    string
     * @description HTML radio 对象 的原生name属性
     */
    name: {
      type: String
    },
    /**
     * #property
     *
     * @name    value
     * @cn      值
     * @group   基本属性
     * @type    string,boolean,number
     * @description radio组件的值
     */
    value: {
      type: [Boolean, String, Number],
      default: true
    },
    /**
     * #property
     *
     * @name    radioLabel
     * @cn      值中文名称
     * @group   标签
     * @type    string,boolean,number
     * @value  radio
     * @description 该选项对应的中文名称
     */
    radioLabel: {
      type: [String, Number, Boolean],
      default: 'radio'
    },
    /**
     * #property
     *
     * @name    checked
     * @cn      是否选中
     * @group   控制
     * @type    string,boolean,number
     * @value  false
     * @description 该选项是否选中，同一组数组下，只有最后一个会选中
     */
    checked: {
      type: [String, Number, Boolean],
      default: false
    }
  },
  data () {
    // radio组件单独使用时，需要根据checked属性和value属性来确定checkedData的值。
    let checkedData
    if ((this.checked === true && Artery.type(this.value) !== 'boolean') ||
      this.checked === this.value ||
      this.checked + '' === this.value + '') {
      checkedData = this.value
    }
    return {
      // 为radio的v-model可使用
      checkedData: checkedData,
      focusInner: false
    }
  },
  watch: {
    checked (newValue) {
      this.checkedData = newValue
      if (this.$refs.input) {
        this.$refs.input.checked = this.isChecked
      }
    }
  },
  computed: {
    inputListeners: function () {
      const _this = this
      // `Object.assign` 将所有的对象合并为一个新对象
      return Object.assign({},
        // 从父级添加所有的监听器
        this.$listeners,
        // 自定义监听器，或覆写一些监听器的行为
        {
          change: function (event) {
            // 未设置checked属性
            if (_this.checked === undefined) {
              _this.checkedData = event.target.checked
            }
            _this.$nextTick(() => {
              if (_this.$parent.$options.name === 'aty-radio-group') {
                _this.$parent.validate()
              }
            })
            // 这里确保组件配合 `v-model` 的工作
            /**
             * #event
             *
             * @name    change
             * @cn      输入
             * @param   checked  checkbox框当前值
             * @param   event   当前事件的event对象
             * @body
             * @description input输入时触发。为确保组件配合 `v-model` 的正常工作，抛出了value参数。
             */
            _this.$emit('change', _this.checkedData, event)
          },
          blur: function (event) {
            _this.focusInner = false
            _this.$emit('blur', event)
            _this.validate()
          },
          focus: function (event) {
            _this.focusInner = true
            _this.$emit('focus', event)
          }
        }
      )
    },
    inputAttrs: function () {
      return Object.assign({},
        // 默认属性
        {},
        this.$attrs
      )
    },
    isChecked () {
      return this.checkedData === this.value || this.checkedData + '' === this.value + ''
    },
    wrapClasses () {
      return [
        `${componentName}-wrapper`,
        {
          [`${componentName}-wrapper-checked`]: this.isChecked,
          [`${componentName}-wrapper-disabled`]: this.inputAttrs.disabled !== undefined && this.inputAttrs.disabled !== false
        }
      ].concat(this.formItemClasses)
    },
    wrapStyles () {
      return this.formItemStyles
    },
    innerClasses () {
      return [
        `${componentName}-inner`,
        {
          [`${componentName}-inner-focus`]: this.focusInner
        }
      ]
    },
    inputClasses () {
      return `${componentName}-input`
    },
    inputStyles () {
      const style = {}
      if (this.realLabelPosition != 'top' && this.realLabelWidth) {
        style.left = `${this.realLabelWidth}px`
        style.width = [
          `calc(100% - ${this.realLabelWidth}px)`,
          `-webkit-calc(100% - ${this.realLabelWidth}px)`,
          `-moz-calc(100% - ${this.realLabelWidth}px)`
        ]
      }
      return style
    }
  },
  methods: {
    // 重置为初始值
    reset () {
      this.checkedData = this._originalCheckedData
      this.$emit('change', this.checkedData)
    },
    // 获取待校验value
    getValidateValue: function () {
      return this.checkedData
    }
  },
  created () {
    // 保存初始值，用于reset
    this._originalCheckedData = Artery.deepCopy(this.checked)
  }
}
export default module
